<template>
	<view>
		<template v-if="!Videoflag">
			<z-paging ref="paging" v-model="bonusList" @query="queryList" :refresher-enabled="false">
				<u-sticky>
					<headsty :mrbot="'73'" searchStatus @transmit="getkeyword"
						:leftImg="'https://morgan.dingxians.cn/static/bonus/3.png'"></headsty>
					<view class="top_boxtabs">
						<view class="dange_img_box" :class="tabsId == item.id ? 'dange_img_box1' : ''"
							@click="tabBtn(item)" v-for="(item, index) in tabs" :key="index"
							:style="{ backgroundImage: 'url(' + (tabsId == item.id ? item.sel_img : item.image) + ')' }">
							{{ item.text }}
						</view>
					</view>
					<view class="tabs_box">
						<view class="dange_xuanze_tab_vbox"
							:class="bot_tabsId == item.id ? 'dange_xuanze_tab_vbox1' : ''"
							v-for="(item, index) in tabsList" :key="index" @click="bottabsBtn(item)">{{ item.text }}
						</view>
					</view>
					<view class="yixuanduoshaoge_box">
						<view class="left_yx_box">已选<text>{{ selectNum }}</text>个</view>
						<view class="right_yx_box">选中赏品总价值：<text>{{ (selectPrice * 1).toFixed(2) }}</text>元素</view>
					</view>
				</u-sticky>
				<!-- <view class="dangecon_box" v-for="(item, index) in bonusList" :key="index">
		   	       <view class="left_box">
		   	           <image src="https://morgan.dingxians.cn/static/homes/shili.webp" mode="heightFix" />
		   	       </view>
		   	       <view class="right_box">
		   	           <view class="top_text_box">泡泡玛特手办泡泡玛特手办泡泡玛特手办泡泡玛特手办泡泡玛特手办</view>
		   	           <view class="center_text_box">950元素</view>
		   	           <view class="bot_text_box">数量X2</view>
		   	       </view>
		   	       <view class="sel_yuan_box">
		   	           <image src="https://morgan.dingxians.cn/static/bonus/1.png" mode="scaleToFill" />
		   	       </view>
		   	       <view class="bujinqi_box">
		   	           <u-number-box v-model="item.setpValue" :max="item.num">
		   	               <view slot="minus" class="minus" style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
		   	               </view>
		   	               <text slot="input" style="width: 50rpx;text-align: center;" class="input">{{ item.setpValue
		   	                   }}</text>
		   	               <view slot="plus" class="plus" style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
		   	               </view>
		   	           </u-number-box>
		   	       </view>
		   	   </view> -->
				<template v-if="tabsId != 8 && tabsId != 7">
					<view class="content_bvox">
						<view class="big_con_box" v-for="(item, index) in bonusList" :key="index"
							@click="selectBtn(item)">
							<view class="dange_box"
								:style="{ backgroundImage: item.type == 1 ? 'url(https://morgan.dingxians.cn/static/uniPic/0' + item.level_id + '.png)' : 'url(https://morgan.dingxians.cn/static/yfs/10.png)' }">
								<view class="dengji_box" v-if="item.type != 1" :class="'dengji_box_' + item.level_id">{{
		   	                       item.level_name }}</view>
								<view class="dengji_box1" v-else :class="'dengji_box1_' + item.level_id">
									{{ item.level_name }}
								</view>
								<view class="yuan_box" v-if="bot_tabsId == 1">
									<image src="https://morgan.dingxians.cn/static/fuyuri/18.png" mode="scaleToFill"
										v-if="!item.flag" />
									<image src="https://morgan.dingxians.cn/static/bonus/9.png" mode="scaleToFill"
										v-else />
								</view>
								<view class="image_box">
									<image :src="item.box_prize_image" mode="heightFix" />
								</view>
								<view class="yuansu_box">{{ item.recovery_price }}元素</view>
							</view>
							<view class="name_box"> {{ item.box_prize_name }}</view>
							<view class="bujinqi_box" v-if="bot_tabsId == 1">
								<u-number-box v-model="item.setpValue" :max="item.num">
									<view slot="minus" class="minus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
									</view>
									<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{ item.setpValue
		   	                           }}</text>
									<view slot="plus" class="plus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
									</view>
								</u-number-box>
							</view>
							<view class="bujinqi_box" v-else>
								<u-number-box :max="item.num">
									<view slot="minus" class="minus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
									</view>
									<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{ item.setpValue
		   	                           }}</text>
									<view slot="plus" class="plus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
									</view>
								</u-number-box>
							</view>
						</view>
						<view class="s" style="width: 160rpx;" v-for="i in 3"></view>
					</view>
				</template>
				<template v-else>
					<view class="content_bvox">
						<view class="big_con_box" v-for="(item, index) in bonusList" :key="index"
							@click="selectBtn(item)">
							<view class="dange_box"
								:style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/yfs/10.png)' }">
								<view class="dengji_box" v-if="item.type != 1" :class="'dengji_box_' + item.level_id">{{
		   	                       item.name }}</view>
								<view class="dengji_box1" v-else :class="'dengji_box1_' + 10">{{ item.name }}
								</view>
								<view class="yuan_box" v-if="bot_tabsId == 1">
									<image src="https://morgan.dingxians.cn/static/fuyuri/18.png" mode="scaleToFill"
										v-if="!item.flag" />
									<image src="https://morgan.dingxians.cn/static/bonus/9.png" mode="scaleToFill"
										v-else />
								</view>
								<view class="image_box" @click="chakan(item)">
									<image :src="item.image" mode="heightFix" />
								</view>
								<view class="yuansu_box" v-if="tabsId != 8">{{ item.recovery_price }}元素</view>
							</view>
							<view class="name_box"> {{ item.box_name }}</view>
							<view class="bujinqi_box" v-if="bot_tabsId == 1">
								<u-number-box v-model="item.setpValue" :max="item.num">
									<view slot="minus" class="minus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
									</view>
									<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{ item.setpValue
		   	                           }}</text>
									<view slot="plus" class="plus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
									</view>
								</u-number-box>
							</view>
							<view class="bujinqi_box" v-else>
								<u-number-box :max="item.num">
									<view slot="minus" class="minus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
									</view>
									<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{ item.setpValue
		   	                           }}</text>
									<view slot="plus" class="plus"
										style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
									</view>
								</u-number-box>
							</view>
						</view>
						<view class="s" style="width: 160rpx;" v-for="i in 3"></view>
					</view>
				</template>
				<view class="c" style="height: 130rpx;"></view>

				<template v-if="bot_tabsId == 1">
					<view class="bottom_guding_box" v-if="tabsId != 6">
						<view class="dange_anniucaozuo_box"
							style="background-image: url('https://morgan.dingxians.cn/static/bonus/2.png');"
							v-for="(item, index) in gudingList" :key="index" @click="bonusButton(item)">{{ item.text }}
						</view>
					</view>
					<view class="bottom_guding_box" v-else>
						<view class="dange_anniucaozuo_box"
							style="background-image: url('https://morgan.dingxians.cn/static/bonus/2.png');"
							@click="ofSafe">
							移出保险箱</view>
					</view>
					<view class="bottom_guding_box" v-if="tabsId == 7">
						<view class="dange_anniucaozuo_box"
							style="background-image: url('https://morgan.dingxians.cn/static/bonus/2.png');"
							@click="openbx">开启
						</view>
						<view class="dange_anniucaozuo_box"
							style="background-image: url('https://morgan.dingxians.cn/static/bonus/2.png');"
							@click="declinebx">
							拒提
						</view>
					</view>
					<template v-if="tabsId != 6 && tabsId != 7">
						<view class="cebianniu_box1" @click="$refs.paging.reload()">
							<image src="https://morgan.dingxians.cn/static/bonus/4.png" mode="scaleToFill" />
						</view>
						<view class="cebianniu_box2" @click="allselBonus" v-if="allFlag">
							<image src="https://morgan.dingxians.cn/static/bonus/5.png" mode="scaleToFill" />
						</view>
						<view class="cebianniu_box2" @click="allselBonus" v-else>
							<image src="https://morgan.dingxians.cn/static/bonus/5.png" mode="scaleToFill" />
						</view>
						<view class="cebianniu_box3" @click="give">
							<image src="https://morgan.dingxians.cn/static/bonus/6.png" mode="scaleToFill" />
						</view>
					</template>
					<template v-if="tabsId== 7">
						<view class="cebianniu_box1" @click="$refs.paging.reload()">
							<image src="https://morgan.dingxians.cn/static/bonus/4.png" mode="scaleToFill" />
						</view>
						<view class="cebianniu_box2" @click="allselBonus">
							<image src="https://morgan.dingxians.cn/static/bonus/5.png" mode="scaleToFill" />
						</view>
					</template>
				</template>
				<u-popup :show="fiveShow" mode="center" bgColor="transparent"
					:overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }">
					<view class="bg_box"
						style="background-image: url('https://morgan.dingxians.cn/static/bonusgive/3.png');">
						<view class="ttle_boxs"
							style="background-image: url('https://morgan.dingxians.cn/static/bonusgive/1.png');">
						</view>
						<view class="guanbi_box" @click="guabnbiGive"
							style="background-image: url('https://morgan.dingxians.cn/static/bonusgive/4.png');">
						</view>
						<view class="give_inp_bopx">
							<u-search @change="searchChange" @input="search" @custom="search" searchIconColor="#fff"
								placeholderColor="#fff" color="#fff" actionText="搜索" :clearabled="false" bgColor="none"
								placeholder="输入对方id" :value="recipientId"></u-search>
						</view>
						<view class="recipient_box">
							<view class="szr_head_box" v-if="JSON.stringify(userInfo) != '{}'">
								<image :src="userInfo.avatar" mode="scaleToFill" />
							</view>
							<view class="szr_name_box" v-if="JSON.stringify(userInfo) != '{}'">{{ userInfo.nickname }}
							</view>
						</view>
						<view class="textart">
							<u--textarea v-model="remarkvalue" :value="remarkvalue" @input="remarkinput"
								placeholder="说点什么吧"></u--textarea>
						</view>
						<view class="zengsongbtn" @click="zengsong"
							style="background-image: url('https://morgan.dingxians.cn/static/bonusgive/2.png');">确认赠送
						</view>
					</view>
				</u-popup>
				<shopapliybonus :recordShow="shopShow" @handlePopup="handlePopupchild" :orderDetail="orderDetail"
					@selAddressBtn="selAddressBtn" @detailedchange="detailedchange" @editBtn="editBtn"
					@payType="payType" :payId="payId" @enterSubmit="enterSubmit"></shopapliybonus>
				<frawResultbx :prizeList="prizeData" :drawResultShow="drawResultShow" @gotoin="gotoin" @accept="accept">
				</frawResultbx>
				<bxfd :ruleShow="bxShow" @handlePopup="handle1Popup" :bxDetailObj="bxDetailObj" :is_bonus="false">
				</bxfd>



			</z-paging>
		</template>
		<template v-if="Videoflag">
			<Drawvideo @videoEnd="handleVideoEnd" @InitialVideoTime="setInitialVideoTime" @passVideo="passVideo">
			</Drawvideo>
		</template>
	</view>
</template>
<script>
	import headsty from '../../components/indexhead.vue'
	import shopapliybonus from '../../components/shopapliybonus.vue'
	import frawResultbx from '../../components/frawResultbx.vue'
	import bxfd from '../../components/bxfd.vue'
	import Drawvideo from '../../components/video.vue'
	export default {
		components: {
			headsty,
			shopapliybonus,
			frawResultbx,
			bxfd,
			Drawvideo
		},
		data() {
			return {
				keyword: '',
				tabs: [{
						id: 0,
						text: '全部',
						image: 'https://morgan.dingxians.cn/static/wxs/1.png',
						sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					},
					// {
					//     id: 1,
					//     text: '无限赏',
					//     image: 'https://morgan.dingxians.cn/static/wxs/1.png',
					//     sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					// },
					// {
					//     id: 2,
					//     text: '擂台',
					//     image: 'https://morgan.dingxians.cn/static/wxs/1.png',
					//     sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					// },
					// {
					//     id: 3,
					//     text: '福利屋',
					//     image: 'https://morgan.dingxians.cn/static/wxs/1.png',
					//     sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					// },
					{
						id: 4,
						text: '进阶',
						image: 'https://morgan.dingxians.cn/static/wxs/1.png',
						sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					},
					// {
					//     id: 5,
					//     text: '爬塔',
					//     image: 'https://morgan.dingxians.cn/static/wxs/1.png',
					//     sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					// },
					{
						id: 6,
						text: '保险箱',
						image: 'https://morgan.dingxians.cn/static/wxs/1.png',
						sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					},
					{
						id: 7,
						text: '宝箱',
						image: 'https://morgan.dingxians.cn/static/wxs/1.png',
						sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					},
					{
						id: 8,
						text: '福袋',
						image: 'https://morgan.dingxians.cn/static/wxs/1.png',
						sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
					},
				],
				tabsId: 0,
				tabsList: [{
						id: 1,
						text: '待处理'
					},
					{
						id: 2,
						text: '已赠送'
					},
					{
						id: 3,
						text: '已拒提'
					},
					// {
					//     id: 5,
					//     text: '提货中'
					// },
					// {
					//     id: 6,
					//     text: '已提货'
					// },
					{
						id: 7,
						text: '已进阶'
					},
				],
				bot_tabsId: 1,
				bonusList: [],
				gudingList: [{
						id: 1,
						text: '进阶'
					},
					{
						id: 2,
						text: '提货'
					},
					{
						id: 3,
						text: '拒提'
					},
					{
						id: 4,
						text: '移入保险柜'
					},
				],
				bonusList: [],
				allFlag: false,
				fiveShow: false,
				remarkvalue: '',
				recipientId: '',
				userInfo: {},
				shopShow: false,
				orderDetail: {
					user_address: {
						id: ''
					},
					user_prizes: {}
				},

				// #ifndef MP-ALIPAY
				payId: 1,
				// #endif
				// #ifdef MP-ALIPAY
				payId: 2,
				// #endif
				remarkvalue: '',
				drawResultShow: false,
				prizeData: [],
				bxShow: false,
				bxDetailObj: {},
				Videoflag: false,
			}
		},
		computed: {
			selectNum() {
				let total_num = 0;
				this.bonusList.filter(item => {
					return item.flag == true
				}).forEach((item) => {
					total_num += item.setpValue
				})
				return total_num;
			},
			selectPrice() {
				let total_price = 0;
				this.bonusList.filter(item => {
					return item.flag == true
				}).forEach((item) => {
					total_price += (item.recovery_price * item.setpValue)
				})
				return total_price;
			},
			selectBonusId() {
				return this.bonusList.filter(item => {
					return item.flag == true
				}).map(item => {
					return item.id + ':' + item.setpValue;
				})
			},
			selectBonusIds() {
				return this.bonusList.filter(item => {
					return item.flag == true
				}).map(item => {
					return item.id
				})
			},
		},
		onShow() {
			if (uni.getStorageSync('bonusRnter')) {
				this.$refs.paging.reload()
			}
			if (Object.keys(this.$store.state.orderDetail.user_address).length > 0) {
				this.orderDetail.user_address = this.$store.state.orderDetail.user_address
				this.fahuo(this.$store.state.orderDetail.user_address.id)
			} else {}
		},
		methods: {
			// 在这里执行父组件需要执行的操作
			handleVideoEnd() {
				console.log('视频播放已完毕');
				this.Videoflag = false
				this.drawResultShow = true
			},
			setInitialVideoTime() {
				console.log("视频加载完成时事件");
				this.Videoflag = true
			},
			passVideo() {
				this.handleVideoEnd()
			},
			chakan(item) {
				if (this.tabsId == 7) {
					this.bxDetailObj = item
					this.bxShow = true
				}
			},
			handle1Popup() {
				this.bxShow = false
			},
			declinebx() {
				let that = this
				uni.showModal({
					title: "确定拒提宝箱？",
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: that.selectBonusId.toString()
							}
							that.$Request.post(that.$api.bonus.boxOrderPrizesTreasure_exchange, data).then(
								res => {
									if (res.code == 200) {
										that.$msg(res.msg)
										setTimeout(() => {
											that.$refs.paging.reload()
										}, 600)
									}
								})
						} else {

						}
					}
				})
			},
			give() {
				if (this.selectBonusId.length > 0) {
					this.fiveShow = true
				} else {
					this.$msg('未选择赏品')
				}
			},
			guabnbiGive() {
				this.fiveShow = false
			},
			searchChange(e) {
				console.log(e)
				this.recipientId = e
			},
			search(e) {
				this.recipientId = e
				this.$Request.get(this.$api.user.users + `/${this.recipientId}`).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			zengsong() {
				let data = {
					user_id: this.recipientId,
					remark: this.remarkvalue,
					params: this.selectBonusId.join(',')
				}
				this.$Request.post(this.$api.bonus.BoxOrderPrizesGive, data).then(res => {
					if (res.code == 200) {
						this.$msg('赠送成功')

						this.$refs.paging.reload()
						setTimeout(() => {
							this.fiveShow = false
						}, 600)
					}
				})
			},
			remarkinput(e) {
				this.remarkvalue = e
			},
			allselBonus() {
				this.allFlag = !this.allFlag
				this.bonusList.forEach(item => {
					if (this.allFlag) {
						item.flag = true
					} else {
						item.flag = false
					}
				})
			},
			queryList(pageNo, pageSize) {
				uni.setStorageSync('bonusRnter', true)
				uni.showLoading({
					title: '加载中'
				})
				if (this.tabsId == 7) {

					let data = {
						page: pageNo,
						limit: 100,
					}
					this.$Request.get(this.$api.bonus.boxOrderPrizesTreasure, data).then(res => {
						if (res.code == 200) {
							uni.hideLoading({})
							res.data.data.data.forEach(i => {
								i.setpValue = i.num
								i.flag = false
							});
							this.$refs.paging.complete(res.data.data.data)
						}
					})
				} else if (this.tabsId == 8) {
					let data = {
						page: pageNo,
						limit: 100,
					}
					this.$Request.get(this.$api.bonus.boxOrderPrizesLucky_bag, data).then(res => {
						if (res.code == 200) {
							uni.hideLoading({})
							res.data.data.data.forEach(i => {
								i.setpValue = i.num
								i.flag = false
							});
							this.$refs.paging.complete(res.data.data.data)
						}
					})
				} else {
					let data = {
						type: this.tabsId,
						page: pageNo,
						limit: 100,
						status: this.bot_tabsId
					}
					this.$Request.get(this.$api.bonus.boxOrderPrizes, data).then(res => {
						uni.hideLoading({})
						if (res.code == 200) {

							res.data.data.forEach(i => {
								i.setpValue = i.num
								i.flag = false
							});
							this.$refs.paging.complete(res.data.data)
						}
					})
				}
			},
			getkeyword(e) {
				this.keyword = e
				console.log(this.keyword)
			},
			tabBtn(item) {
				this.tabsId = item.id
				if (item.id == 7) {

					this.bot_tabsId = 1

					this.$refs.paging.reload()

				} else {
					if (item.id == 8) {

						this.bot_tabsId = 8

						this.$refs.paging.reload()
					} else {
						this.bot_tabsId = 1
						this.$refs.paging.reload()
					}

				}

			},
			bottabsBtn(item) {
				this.bot_tabsId = item.id
				this.$refs.paging.reload()
			},
			selectBtn(item) {
				item.flag = !item.flag
			},
			bonusButton(item) {
				if (item.id == 1) {
					this.$router('/shopPage/move')
				} else {
					if (this.selectBonusId.length > 0) {
						let that = this
						uni.showModal({
							title: "确定" + item.text + "？",
							success: function(res) {
								if (res.confirm) {
									let data = {
										params: that.selectBonusId.toString()
									}
									if (item.id == 2) {

										that.fahuo()
										that.shopShow = true
									} else if (item.id == 3) {
										uni.showLoading({
											title: '加载中'
										})
										that.$Request.post(that.$api.bonus.BoxOrderPrizesExchange, data).then(
											res => {
												uni.hideLoading()
												if (res.code == 200) {
													that.$msg(res.msg)
													that.$refs.paging.reload()

												}
											})
									} else {

										let data1 = {
											params: that.selectBonusId.toString(),
											type: 1,
										}
										that.$Request.post(that.$api.bonus.boxOrderPrizesLock, data1).then(
											res => {
												uni.hideLoading()
												if (res.code == 200) {
													that.$msg(res.msg)
													that.$refs.paging.reload()

												}
											})
									}

								} else {
									console.log('取消')
								}
							}
						})
					} else {
						this.$msg('请选择赏品')
					}
				}

			},
			fahuo(id = '') {
				let data = {
					ids: this.selectBonusId,
					user_address_id: id,
				}
				this.$Request.get(this.$api.bonus.boxOrderPrizesOrder, data).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.orderDetail = res.data
					}
				})
			},
			handlePopupchild() {
				this.shopShow = false
			},
			ofSafe() {

				if (this.selectBonusId) {
					let that = this
					uni.showModal({
						title: "确定移出保险箱？",
						success: function(res) {
							if (res.confirm) {
								let data = {
									params: that.selectBonusId.toString(),
									type: 2,
								}
								that.$Request.post(that.$api.bonus.boxOrderPrizesLock, data).then(res => {
									uni.hideLoading()
									if (res.code == 200) {
										that.$msg(res.msg)
										that.$refs.paging.reload()
									}
								})
							} else {

							}
						}
					})
				} else {

					that.$msg('请先选择')
				}

			},
			openbx() {
				if (this.selectBonusIds) {
					let that = this
					uni.showModal({
						title: "确定开启宝箱？",
						success: function(res) {
							if (res.confirm) {
								let data = {
									id: that.selectBonusIds.toString()
								}
								// console.log(data,'data')
								that.$Request.post(that.$api.bonus.boxOrderPrizesOpenTreasure, data).then(
									res => {
										if (res.code == 200) {
											that.$msg(res.msg)
											res.data.forEach(item => {
												if (item.box_prize_level == 10) {
													that.setInitialVideoTime()
												} else {
													that.drawResultShow = true
												}
											})

											that.prizeData = res.data
										}
									})
							} else {

							}
						}
					})
				} else {
					that.$msg('请先选择')
				}

			},

			accept() {
				this.drawResultShow = false
				this.$refs.paging.reload()

			},
			selAddressBtn() {
				uni.setStorageSync('bonusRnter', false)
				this.$router('/userPage/address/address?is_Back=' + true)
			},
			editBtn(item) {
				uni.setStorageSync('bonusRnter', false)
				this.$router('/userPage/address/editaddress?is_Back=' + true + '&item=' + JSON.stringify(item))
			},
			detailedchange(e) {
				console.log(e)
				this.remarkvalue = e
			},
			payType(item) {
				this.payId = item.id
				this.getOrder(this.orderDetail.user_address.id)
			},
			enterSubmit() {
				console.log(this.selectBonusId, this.selectBonusIds)
				let data = {
					user_address_id: this.orderDetail.user_address.id,
					pay_type: this.payId,
					type: 1,
					remark: this.remarkvalue,
					coupon_id: '',
					num: this.orderDetail.num,
					prize_id: this.selectBonusId,
					market: 'wx',
					tag: 1

				}
				this.$Request.post(this.$api.shop.orders, data).then(res => {
						if (res.code == 200) {

							uni.setStorageSync('bonusRnter', true)
							if (res.data.order_status == 2) {
								this.$msg('购买成功')
								setTimeout(() => {
									this.$router('/userPage/order/order?status=' + 2)
								}, 500)
							} else {
								var pay_data = res.data
								if (pay_data.order_status == 1) {
									if (this.payId == 2) { //支付宝
										uni.requestPayment({
											provider: 'alipay',
											orderInfo: pay_data.data,
											success: (res) => {
												this.$msg('支付成功')
												this.$router('/userPage/order/order?status=' + 2)
											},
											fail: (error) => {
												this.$router('/userPage/order/order?status=' + 5)
											},
										})
									} else {
										// #ifdef APP-PLUS
										uni.requestPayment({
												provider: 'wxpay',
												orderInfo: pay_data.data,
												success: (res) => {
													this.$msg('支付成功')
													this.$router('/userPage/order/order?status=' + 2)
												},
												fail: (error) => {
													this.$router('/userPage/order/order?status=' + 5)
													complete: (complete) => {

													},
												})
											// #endif
											// #ifdef MP-WEIXIN
											uni.requestPayment({
												provider: 'wxpay',
												timeStamp: res.data.data.timeStamp,
												nonceStr: res.data.data.nonceStr,
												package: res.data.data.package,
												signType: res.data.data.signType,
												paySign: res.data.data.paySign,
												success: (res) => {
													this.$msg('支付成功')
													this.$router('/userPage/order/order?status=' + 5)
												},
												fail: (err) => {
													this.$router('/userPage/order/order?status=' + 1)
												},
											})
											// #endif
										}
									}
								}


							}
						})
				},
			}

		}
</script>
<style lang="scss" scoped>
	/deep/.u-textarea {
		background-color: transparent !important;
	}

	/deep/.u-textarea {
		color: #fff !important;
	}

	.top_boxtabs {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		overflow: hidden;
		overflow-x: auto;

		.dange_img_box {
			width: 161rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-size: 100% 100%;
			font-family: text1;
			font-weight: normal;
			font-size: 30rpx;
			color: #A99B7B;
			font-style: italic;
			margin-right: 20rpx;
			flex-shrink: 0;

			&.dange_img_box1 {
				color: rgba(238, 213, 46, 1);
			}
		}
	}

	.tabs_box {
		width: 100%;
		height: 50rpx;
		box-sizing: border-box;
		padding-left: 30rpx;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 40rpx;
		overflow: hidden;
		overflow-x: auto;

		.dange_xuanze_tab_vbox {
			flex-shrink: 0;
			padding: 0 28rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			margin-right: 30rpx;
			background: rgba(255, 255, 255, .5);
			border-radius: 25rpx;
			color: #ccc;
			font-size: 28rpx;

			&.dange_xuanze_tab_vbox1 {
				color: #FF4545;
				background: #501414;

			}
		}


	}

	.yixuanduoshaoge_box {
		width: 100%;
		height: 30rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 43rpx;

		.left_yx_box,
		.right_yx_box {
			height: 27rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #8F8F8F;
			line-height: 27rpx;

			text {
				color: rgba(255, 69, 69, 1);
			}
		}
	}

	.content_bvox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 28rpx;
		flex-wrap: wrap;

		.big_con_box {
			width: 160rpx;
			margin-bottom: 40rpx;

			.dange_box {
				width: 160rpx;
				height: 221rpx;
				background-size: 100% 100%;
				position: relative;
				margin-bottom: 13rpx;
				box-sizing: border-box;

				.dengji_box {
					font-family: text1;
					font-weight: bold;
					font-size: 24rpx;
					color: #E7CE18;
					position: absolute;
					top: 5rpx;
					left: 18rpx;

					&.dengji_box_1 {
						color: #E7CE18;
					}

					&.dengji_box_2 {
						color: #D876FC;
					}

					&.dengji_box_6 {
						color: #F9B7B1;
					}

					&.dengji_box_8 {
						color: #FEB0D1;
					}
				}

				.dengji_box1 {
					font-family: text1;
					font-weight: bold;
					font-size: 24rpx;
					color: #E7CE18;
					position: absolute;
					top: 5rpx;
					left: 18rpx;

					&.dengji_box1_1 {
						color: #C5F7FD;
					}

					&.dengji_box1_2 {
						color: #EBC5FD;
					}

					&.dengji_box1_3 {
						color: #FDC5EB;
					}

					&.dengji_box1_4 {
						color: #FFEE1F;
					}
				}

				.yuan_box {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 10rpx;
					top: 20rpx;
					z-index: 2;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.image_box {
					position: absolute;
					max-width: 96rpx;
					height: 140rpx;
					top: 28rpx;
					left: 15rpx;

					image {
						height: 100%;
					}
				}

				.yuansu_box {
					position: absolute;
					width: 100%;
					height: 19rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: center;
					bottom: 25rpx;
				}
			}

			.name_box {
				width: 100%;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				overflow: hidden;
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 23rpx;

			}

			.bujinqi_box {
				margin: auto;
				width: 120rpx;
				height: 30rpx;
				bottom: 30rpx;
				right: 30rpx;

				.minus {
					width: 30rpx;
					height: 30rpx;
					background-size: 100% 100%;
				}

				.input {
					padding: 0 10rpx;
					height: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 30rpx;
				}

				.plus {
					width: 30rpx;
					height: 30rpx;
					background-size: 100% 100%;
				}
			}

		}

	}

	/*
.dangecon_box {
    width: 690rpx;
    height: 210rpx;
    // border: 2px solid #FF4545;
    margin: auto;
    margin-bottom: 30rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    .sel_yuan_box {
        position: absolute;
        width: 24rpx;
        height: 24rpx;
        top: 20rpx;
        right: 20rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .bujinqi_box {
        position: absolute;
        width: 120rpx;
        height: 30rpx;
        bottom: 30rpx;
        right: 30rpx;

        .minus {
            width: 30rpx;
            height: 30rpx;
            background-size: 100% 100%;
        }

        .input {
            padding: 0 10rpx;
            height: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 30rpx;
        }

        .plus {
            width: 30rpx;
            height: 30rpx;
            background-size: 100% 100%;
        }
    }

    .left_box {
        max-width: 180rpx;
        height: 170rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20rpx;
        margin-right: 44rpx;

        image {
            height: 100%;
        }
    }

    .right_box {
        height: 170rpx;
        box-sizing: border-box;

        .top_text_box {
            width: 300rpx;
            height: 31rpx;
            padding-top: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 31rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 31rpx;
        }

        .center_text_box {
            height: 25rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            line-height: 25rpx;
            margin-bottom: 31rpx;
        }

        .bot_text_box {
            height: 23rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 23rpx;
        }
    }
}
*/

	.bottom_guding_box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(28, 8, 2, 1);
		box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(255, 255, 255, 0.26);
		padding: 0 30rpx;
		overflow: hidden;
		overflow-x: auto;

		.dange_anniucaozuo_box {
			width: 166rpx;
			height: 80rpx;
			background-size: 100% 100%;
			font-family: text1;
			font-weight: bold;
			font-size: 22rpx;
			color: #FD6363;
			line-height: 80rpx;
			font-style: italic;
			text-align: center;
			margin-right: 20rpx;
			flex-shrink: 0;
		}
	}

	.cebianniu_box1 {
		width: 109rpx;
		height: 122rpx;
		position: fixed;
		right: 30rpx;
		bottom: 442rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cebianniu_box2 {
		width: 109rpx;
		height: 124rpx;
		position: fixed;
		right: 30rpx;
		bottom: 310rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cebianniu_box3 {
		width: 109rpx;
		height: 122rpx;
		position: fixed;
		right: 30rpx;
		bottom: 184rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bg_box {
		width: 580rpx;
		height: 700rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 29rpx;
		position: relative;

		.ttle_boxs {
			width: 402rpx;
			height: 66rpx;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			margin-bottom: 38rpx;
		}

		.give_inp_bopx {
			width: 540rpx;
			height: 80rpx;
			background: rgba(255, 6, 0, .2);
			border-radius: 10rpx;
			margin: auto;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			margin-top: 133rpx;
			margin-bottom: 24rpx;
		}

		.recipient_box {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 0 32rpx;
			margin-bottom: 10rpx;

			.szr_head_box {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.szr_name_box {
				height: 80rpx;
				line-height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.textart {
			width: 520rpx;
			height: 200rpx;
			margin: auto;
			background: rgba(255, 6, 0, .2);
			border-radius: 10rpx;
			margin-bottom: 24rpx;
		}

		.zengsongbtn {
			width: 529rpx;
			height: 120rpx;
			background-size: 100% 100%;
			margin: auto;
			font-family: text1;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 120rpx;
			text-align: center;
		}

		.guanbi_box {
			position: absolute;
			width: 73rpx;
			height: 73rpx;
			background-size: 100% 100%;
			top: 30rpx;
			right: 13rpx;

		}
	}
</style>